<template>
  <div class="tabItem">
    <el-card :body-style="{ padding: '0px' }">
      <el-image
        fit="contain"
        :src="resourceItem.resourceImg"
        class="image"
      />
      <el-row type="flex">
        <el-col
          :span="24"
          style="
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            color: #01aaed;
          "
        >
          <span>{{resourceItem.resourceName}}</span>
        </el-col>
      </el-row>

      <div
        style="
          text-align: center;
          padding: 8px;
          font-size: smaller;
          color: #838383;
          overflow: hidden;
        "
      >
        <span>提取码：{{resourceItem.resourceTqm}}</span>
      </div>

      <el-divider></el-divider>

      <div class="xz">
        <a class="alink" :href="resourceItem.resourceLink" size="medium">下载</a>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ResourceTab",
  props:["resourceItem"],
  created(){
    console.log("item:",this.resourceItem)
  }
};
</script>

<style>
.alink{
  border: 3px rgb(111, 196, 167) solid;
  border-radius: 10px;
  padding: 3px 10px 3px 10px;
}

.alink:hover{
  background-color: aquamarine;
}

.xz {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.el-divider--horizontal {
  margin: 8px 0;
}
.image {
  height: 157px;
  width: -webkit-fill-available;
  margin: 10px;
}
.el-card {
  height: 100%;
  width: 300px;
  margin: 15px;
}
</style>

